<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <p>{{foo}}</p>
    <button v-on:click="foo = 'baz'">Change it</button>
</div>
<script>
    //我们的数据对象
    var data = {a: 1};
    //该对象被加入到一个Vue实例中
    var vm = new Vue({
        el:'app',
        data: data
    });
    //获得这个实例上的属性
    //返回源数据中对应的字段
    vm.a = data.a;
    //设置属性也会影响到原始数据
    vm.a = 2;
    data.a;//=>2
    console.log(vm.a);
    console.log(data.a);
    //...反之亦然
    data.a = 3;
    vm.a; // =>3
    console.log(vm.a);
    console.log(data.a);
    //修改vm.a的值会重渲染
    //添加vm.b不会渲染

    vm.$data == data; //true
    vm.$el === document.getElementById('example');

    //$watch是一个实例方法
    vm.$watch('a', function (newValue, oldValue) {
        //这个回调将在vm.a改变后调用
    });

    new Vue({
        data:{
            a:1
        },
        created: function () {
            // `this`指向vm实例
            console.log('a is: ' + this.a)
        }
    });
    //=> 'a is: 1'
</script>

</body>
</html>